<template>
  <div class="details">
    <div class="details-header">
      <img :src="food.thumb"  />
      <div class="close" @click="closeDetails"><i class="iconfont icon-close"></i></div>
    </div>
    <div class="details-content">
      <div class="details-con">
        <div class="title">{{food.dishes_name}}</div>
        <div class="sales">月售{{food.sales}}</div>
        <div class="con-price">
          <span class="price">{{food.price * food.discount}}</span>
          <div class="buy">
            <div class="price-regu" v-if="food.is_attr == 1" @click="selectSpec(food)">选规格</div>
            <shop-control :food="food" v-else @cartAdd="handleAdd"></shop-control>
          </div>
        </div>
      </div>
      <div class="describe">
        <div class="describe-title">商品描述</div>
        <div class="describe-con">{{food.description?food.description:'暂无描述'}}</div>
      </div>
      <div class="nav">
        <shop-cart :shopData="shopData" ref="shopcart"></shop-cart>
      </div>
      <!-- 选择多规格 -->
      <dish-specs :food="specData"  v-if="seeSpec" @closeSpec="closeSpec"></dish-specs>
    </div>
    
  </div>
</template>

<script>
import shopCart from './cart'
import shopControl from './control';
import dishSpecs from './specs';

export default {
  name: 'foodDetails',
  components: {
    shopCart: shopCart,
    shopControl,
    dishSpecs
  },
  data() {
    return {
      food: {},
      shopData: this.$store.state.shopData,
      specData: {},
      seeSpec: false
    }
  },
  activated() {
    this.food = this.$route.params.food
  },
  methods: {
    //选择多规格
    selectSpec(dish) {
      this.specData = dish;
      this.seeSpec = true
    },
    //关闭多规格
    closeSpec() {
      this.seeSpec = false
    },

    //菜的数量增加
    handleAdd(e) {
      this.$nextTick(() => {
          this.$refs.shopcart.drop(e);
      });
    },

    //关闭菜式详情页面
    closeDetails() {
      this.$router.push({path: '/'})
      //this.$router.go(-1)
    }
  }
} 
</script>

<style lang="stylus" scoped>
@import "~styles/common.styl"
  .details
    .details-header
      width 100%
      height 6rem
      display flex
      justify-content center
      align-items center
      overflow hidden
      position relative
      &::after
        content ''
        position: absolute
        height: 2px
        -webkit-transform: scale(1,.5)
        transform: scale(1,.5)
        -webkit-transform-origin: 0 bottom
        transform-origin: 0 bottom
        bottom: 0
        left 0
        right 0
        border-bottom: 1px solid #e1e1e1
      img
        width 100%
      .close
        width 0.8rem
        height 0.8rem
        border-radius 50%
        background rgba(0,0,0,0.8)
        color #ffffff
        position absolute
        right 10px 
        top 10px
        display flex
        justify-content center
        align-items center
    .details-content
      padding 0 15px
      .details-con
        margin-top 30px
        .title
          font-size 20px
          color #000
          font-weight bold
        .sales
          font-size 14px
          color #999
          margin-top 12px
        .con-price
          display flex
          justify-content space-between
          margin-top 0.18rem
          .price
            font-size 0.38rem
            color $fontColor
            font-weight bold
            margin-top 0.04rem
            &::before
              content '¥'
              font-size 0.28rem
          .buy
            .price-regu
              background $themeColor
              width 1.1rem
              height 0.44rem
              border-radius 0.22rem
              line-height 0.46rem
              text-align center
              font-size 0.24rem
              color #fff
      .describe
        margin-top 12px
        padding 20px 0
        position relative
        &::after
          content ''
          position: absolute
          height: 2px
          -webkit-transform: scale(1,.5)
          transform: scale(1,.5)
          -webkit-transform-origin: 0 bottom
          transform-origin: 0 bottom
          top: 0
          left 0
          right 0
          border-bottom: 1px solid #e1e1e1
        .describe-title
          font-size 16px
          font-weight bold
          color #000
        .describe-con
          font-size 13px
          color #666
          line-height 20px
          margin-top 10px
      .nav
        position: fixed;
        z-index: 19;
        right: 15px;
        bottom: 15px;
        left: 15px;
        height: 0.8rem;
        display flex
        justify-content center
</style>